<template>
  <div class="hundred_percent_form left_form">
    <el-form :label-position="labelPosition" v-loading="loading" ref="form" :rules="rules" :model="form" label-width="100px">
      <el-form-item label="Logo">
        <div class="loading_div" v-if="form.logopic" v-loading="divLoading">
          <img class="app_logo" :src="form.logopic">
        </div>
        <UploadLocal ext="jpg,png,jpeg" :size="3072000" @on-select="onSelectPic"></UploadLocal>

      </el-form-item>
      <el-form-item label="联系方式" prop="contactiinfo">
        <el-input v-model="form.phone"  placeholder="请填写联系方式" clearable></el-input>
      </el-form-item>
        <el-form-item label="IOS版本" prop="contactiinfo">
            <el-input v-model="form.iosversion"  placeholder="请填写IOS版本" clearable></el-input>
        </el-form-item>
        <el-form-item label="安卓版本" prop="contactiinfo">
            <el-input v-model="form.androidversion"  placeholder="请填写安卓版本" clearable></el-input>
        </el-form-item>
        <tinymce style="display: inline-block;width: 100%;" ref="tinymce" :height="500" v-model="form.text"/>
      <el-form-item style="margin-top: 20px;margin-left: 200px;">
        <el-button type="primary" @click="formSubmit" :loading="formLoading">保 存</el-button>
        <el-button @click="onCancel">取 消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { aboutUs, edit } from "../../api/setting/text.js";
import Upload from "../../components/File/Upload.vue";
import UploadLocal from "../components/File/UploadLocal.vue";
import Tinymce from "../../components/Tinymce/index.vue";
export default {
    components: {
        Tinymce,
        Upload,
        UploadLocal
    },
    data() {
        return {
            loading: false,
            formLoading: false,
            divLoading: false,
            form: {
                text: "",
                textid: "",
                logopic: "",
                androidversion: "",
                iosversion:"",
                phone: "",
                type:0
            },
            labelPosition: "left",
            rules: {
                phone: [
                    {
                        required: true,
                        message: "请填写联系方式",
                        trigger: "blur"
                    }
                ],
                text:[
                    {
                        required:true,
                        message:"请填写关于信息",
                    }
                ],
                androidversion: [
                    {
                        required: true,
                        message: "请填安卓信息",
                        trigger: "blur"
                    },
                    {
                        max: 100,
                        message: "最多键入100字",
                        trigger: "blur"
                    }
                ]
                ,
                iosversion: [
                    {
                        required: true,
                        message: "请填IOS信息",
                        trigger: "blur"
                    },
                    {
                        max: 100,
                        message: "最多键入100字",
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    methods: {
        onCancel() {
            this.getInfo();
        },
        onSelectPic(filePath) {
            this.divLoading = true;
           // alert(filePath)
            this.form.logopic = filePath;
            setTimeout(() => {
                this.divLoading = false;
            }, 0.8 * 1000);
        },
        getInfo() {

            this.loading = true;
            aboutUs({ type: this.form.type })
                .then(response => {
                    if (response.code) {
                        this.$message.error(response.message);
                    }
                    if (response.data) {
                        this.form = response.data;
                    }
                    setTimeout(() => {
                        this.loading = false;
                    }, 0.3 * 1000);
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        formSubmit() {
            this.formLoading = true;
            let data = Object.assign({}, this.form);
            edit(data).then(response => {
                this.formLoading = false;
                if (response.code) {
                    this.$message.error(response.message);
                    return false;
                }
                this.$message.success("操作成功");
                //刷新表单
                this.form = response.data;
            });
        }
    },
    created() {
        // 加载版本数据
      this.getInfo();
    }
};
</script>

<style type="text/scss" lang="scss">
body {
    margin: 0;
}
.app_logo {
    width: 150px;
    height: 150px;
    border-radius: 5px;
    max-width: 150px;
    max-height: 150px;
}
.loading_div {
    width: 150px;
    height: 150px;
    border-radius: 5px;
    max-width: 150px;
    max-height: 150px;
}
</style>
